<template>
<div id="makeup">
    <div class="section category-section">
        <div>
            <div class="tab-bar-box">
                <div class="tab-bar">
                    <ul class="tab-bar-ul">
                        <li class="tab-bar-li" @click="follow()">关注</li>
                        <li class="tab-bar-li" @click="foolist()">食谱</li>
                        <li class="tab-bar-li" @click="recommend()">推荐</li>
                        <li class="tab-bar-li on">时尚美妆</li>
                        <li class="tab-bar-li" @click="life()">生活</li>
                    </ul>
                </div>
            </div>
             <div class="tab-content">
              <div class="content-item">
                <div>
                  <div class="scroll-box scrollLoad-box">
                    <div>
                      <ul class="item-list">
                        <li class="item-list-pic-bottom">
                          <div class="item-list-cont">
                            <p class="item-list-cont-title-bottom">美妆大神Pony推荐，你与妆感服帖之间，只差这款会爆水的隔离霜</p>
                            <p class="item-list-cont-desc-clamp2">会化妆的女生，根本不需要去整容，但很多人化了一辈子妆，还是搞不定这张脸。</p>
                          </div>
                          <div class="pic">
                            <img :src="assets.ruye" alt="" class="item-list-back-img" style="height: calc((100vw - 20px) * 0.447761);width:335px">
                          </div>
                          <div class="item-list-cont-bottom">
                            <div class="userInfo">
                              <img :src="assets.guantou" alt="" class="photo">
                              <span style="font-size: 12px;font-weight: 300;color: #666;">罐头视频</span>
                            </div>
                          </div>
                        </li>
                         <li class="item-list-pic-bottom">
                          <div class="item-list-cont">
                            <p class="item-list-cont-title-bottom">海洋美甲</p>
                            <p class="item-list-cont-desc-clamp2">指尖上的碧蓝海岸~</p>
                          </div>
                          <div class="pic">
                            <img :src="assets.meijia" alt="" class="item-list-back-img" style="height: calc((100vw - 20px) * 0.447761);width:335px">
                          </div>
                          <div class="item-list-cont-bottom">
                            <div class="userInfo">
                              <img :src="assets.guantou" alt="" class="photo">
                              <span style="font-size: 12px;font-weight: 300;color: #666;">罐头时尚I-SEE</span>
                            </div>
                          </div>
                        </li>
                        <li class="item-list-pic-left">
                          <div class="pic">
                            <img :src="assets.lingdai" alt="" class="item-list-bigPic">
                          </div>
                          <div class="item-list-cont">
                            <p class="item-list-cont-title">4种实用领带打法</p>
                            <p class="item-list-cont-desc">让你出席各种场合都木问题！</p>
                            <div class="item-list-cont-bottom">
                              <div class="userInfo">
                                <img :src="assets.guantou" alt="" class="photo">
                                <span style="font-size: 12px;font-weight: 300;color: #666;">罐头时尚I-SEE</span>
                              </div>
                            </div>
                          </div>
                        </li>
                        <li class="item-list-pic-left">
                          <div class="pic">
                            <img :src="assets.girl" alt="" class="item-list-bigPic">
                          </div>
                          <div class="item-list-cont">
                            <p class="item-list-cont-title">【图解】口红会涂比会买更重要！</p>
                            <p class="item-list-cont-desc">少女们~你们一定有过这种经历：无论是海报上还是美妆博主PO文上的口红试色都感觉贼拉好看！</p>
                            <div class="item-list-cont-bottom">
                              <div class="userInfo">
                                <img :src="assets.guantou" alt="" class="photo">
                                <span style="font-size: 12px;font-weight: 300;color: #666;">罐头时尚ISEE</span>
                              </div>
                            </div>
                          </div>
                        </li>
                        <li class="item-list-pic-left">
                          <div class="pic">
                            <img :src="assets.girl2" alt="" class="item-list-bigPic">
                          </div>
                          <div class="item-list-cont">
                            <p class="item-list-cont-title">【I-SEE带你涨姿势】黑头拜拜！这可能是最有良心的黑头指南了！</p>
                            <p class="item-list-cont-desc">I-SEE给你解决祛黑头这件宇宙难题~</p>
                            <div class="item-list-cont-bottom">
                              <div class="userInfo">
                                <img :src="assets.guantou" alt="" class="photo">
                                <span style="font-size: 12px;font-weight: 300;color: #666;">罐头时尚ISEE</span>
                              </div>
                            </div>
                          </div>
                        </li>
                        <li class="item-list-pic-left">
                          <div class="pic">
                            <img :src="assets.girl3" alt="" class="item-list-bigPic">
                          </div>
                          <div class="item-list-cont">
                            <p class="item-list-cont-title">洗头时放2粒这个，头发乌黑不出油，再也不用去洗发店！</p>
                            <p class="item-list-cont-desc">早上洗头晚上就变油头，洗头发都洗不过来，在头发上抹点这个，一个星期不洗头，头皮照样清爽干净。</p>
                            <div class="item-list-cont-bottom">
                              <div class="userInfo">
                                <img :src="assets.yde" alt="" class="photo">
                                <span style="font-size: 12px;font-weight: 300;color: #666;">朱莉生活日记</span>
                              </div>
                            </div>
                          </div>
                        </li>
                        <li class="item-list-pic-bottom">
                          <div class="item-list-cont">
                            <p class="item-list-cont-title-bottom">“脱下裤子胖10斤”，饮食、穿搭..全方位拯救梨形女孩</p>
                            <p class="item-list-cont-desc-clamp2">我算是比较典型的梨形身材，从小时候执着于瘦腿，到后来慢慢开始接受这个事实，并且学习如何通过穿衣服来扬长避短，让自己看起来更协调一些。</p>
                          </div>
                          <div class="pic">
                            <img :src="assets.sport" alt="" class="item-list-back-img" style="height: calc((100vw - 20px) * 0.447761);width:335px">
                          </div>
                          <div class="item-list-cont-bottom">
                            <div class="userInfo">
                              <img :src="assets.ssy" alt="" class="photo">
                              <span style="font-size: 12px;font-weight: 300;color: #666;">咕噜健身厨房</span>
                            </div>
                          </div>
                        </li>
                         <li class="item-list-pic-bottom">
                          <div class="item-list-cont">
                            <p class="item-list-cont-title-bottom">欧阳娜娜为什么穿什么都时髦？！</p>
                            <p class="item-list-cont-desc-clamp2">自从欧阳娜娜18岁生日演奏会结束之后，她又回归了校园生活，成为了一名普普通通的学生，追她的vlog也变成了我的日常。</p>
                          </div>
                          <div class="pic">
                            <img :src="assets.girl4" alt="" class="item-list-back-img" style="height: calc((100vw - 20px) * 0.447761);width:335px">
                          </div>
                          <div class="item-list-cont-bottom">
                            <div class="userInfo">
                              <img :src="assets.ssy" alt="" class="photo">
                              <span style="font-size: 12px;font-weight: 300;color: #666;">马壮实</span>
                            </div>
                          </div>
                        </li>
                        <li class="item-list-pic-left">
                          <div class="pic">
                            <img :src="assets.girl2" alt="" class="item-list-bigPic">
                          </div>
                          <div class="item-list-cont">
                            <p class="item-list-cont-title">【I-SEE带你涨姿势】黑头拜拜！这可能是最有良心的黑头指南了！</p>
                            <p class="item-list-cont-desc">I-SEE给你解决祛黑头这件宇宙难题~</p>
                            <div class="item-list-cont-bottom">
                              <div class="userInfo">
                                <img :src="assets.guantou" alt="" class="photo">
                                <span style="font-size: 12px;font-weight: 300;color: #666;">罐头时尚ISEE</span>
                              </div>
                            </div>
                          </div>
                        </li>
                        <li class="item-list-pic-left">
                          <div class="pic">
                            <img :src="assets.girl3" alt="" class="item-list-bigPic">
                          </div>
                          <div class="item-list-cont">
                            <p class="item-list-cont-title">洗头时放2粒这个，头发乌黑不出油，再也不用去洗发店！</p>
                            <p class="item-list-cont-desc">早上洗头晚上就变油头，洗头发都洗不过来，在头发上抹点这个，一个星期不洗头，头皮照样清爽干净。</p>
                            <div class="item-list-cont-bottom">
                              <div class="userInfo">
                                <img :src="assets.yde" alt="" class="photo">
                                <span style="font-size: 12px;font-weight: 300;color: #666;">朱莉生活日记</span>
                              </div>
                            </div>
                          </div>
                        </li>
                         <li class="item-list-pic-left">
                          <div class="pic">
                            <img :src="assets.lingdai" alt="" class="item-list-bigPic">
                          </div>
                          <div class="item-list-cont">
                            <p class="item-list-cont-title">4种实用领带打法</p>
                            <p class="item-list-cont-desc">让你出席各种场合都木问题！</p>
                            <div class="item-list-cont-bottom">
                              <div class="userInfo">
                                <img :src="assets.guantou" alt="" class="photo">
                                <span style="font-size: 12px;font-weight: 300;color: #666;">罐头时尚I-SEE</span>
                              </div>
                            </div>
                          </div>
                        </li>
                        <li class="item-list-pic-left">
                          <div class="pic">
                            <img :src="assets.girl" alt="" class="item-list-bigPic">
                          </div>
                          <div class="item-list-cont">
                            <p class="item-list-cont-title">【图解】口红会涂比会买更重要！</p>
                            <p class="item-list-cont-desc">少女们~你们一定有过这种经历：无论是海报上还是美妆博主PO文上的口红试色都感觉贼拉好看！</p>
                            <div class="item-list-cont-bottom">
                              <div class="userInfo">
                                <img :src="assets.guantou" alt="" class="photo">
                                <span style="font-size: 12px;font-weight: 300;color: #666;">罐头时尚ISEE</span>
                              </div>
                            </div>
                          </div>
                        </li>
                      </ul>
                    </div>
                    <div class="more-text">数据加载中请稍后</div>
                  </div>
                </div>
              </div>
            </div>




            <div class="navigation footer-nav ipx-pad">
                <span class="navigation-item" @click="index()">
                <i class="iconfont1 icon-home"></i>
                <span class="navigation-item-label">首页</span>
                </span>
                <span class="navigation-item">
                 <i class="iconfont2 icon-home"></i>
                <span class="navigation-item-label nav-item-label1">发现</span>
                </span>
                <span class="navigation-item" @click="buy()">
                 <i class="iconfont3 icon-home"></i>
                <span class="navigation-item-label">购物车</span>
                </span>
                <span class="navigation-item" @click="list()">
                 <i class="iconfont4 icon-home"></i>
                <span class="navigation-item-label">订单</span>
                </span>
                <span class="navigation-item" @click="mine()">
                 <i class="iconfont5 icon-home"></i>
                <span class="navigation-item-label">我的</span>
                </span>
            </div>
        </div>
    </div>








    
</div>
</template>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: 400;
  font-style: normal;
}
#makeup {
  .category-section {
    padding-bottom: 51px;
    .tab-bar-box {
      height: 50px;
      overflow-y: hidden;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 501;
      .tab-bar {
        text-align: center;
        white-space: nowrap;
        width: 100%;
        height: 60px;
        line-height: 50px;
        background-color: #fff;
        overflow-x: auto;
        .tab-bar-ul {
          height: 50px;
          display: inline-block;
          text-align: center;
          .tab-bar-li {
            font-size: 16px;
            color: #333;
            padding: 15px 13px;
            height: 20px;
            line-height: 20px;
            display: inline-block;
            position: relative;
          }
          .on {
            color: #47b34f;
          }
          .on:after {
            content: "";
            height: 3px;
            width: 20px;
            background-color: #47b34f;
            position: absolute;
            border-radius: 5px;
            bottom: 7px;
            left: 50%;
            margin-left: -10px;
          }
        }
      }
    }

     .tab-content {
      padding-top: 50px;
      .content-item {
        height: 100%;
        .scrollLoad-box {
          padding-bottom: 50px;
          overflow-x: auto;
          .item-list {
            padding: 0 10px;
            list-style: none;
            .item-list-pic-bottom {
              background-color: #fff;
              border-radius: 6px;
              border: none;
              margin: 10px 0;
              padding: 10px;
              clear: both;
              font-weight: 400;
              font-style: normal;
              color: #555;
              .item-list-cont {
                padding: 5px 0 10px;
                .item-list-cont-title-bottom {
                  overflow: hidden;
                  text-overflow: ellipsis;
                  font-size: 18px;
                  font-weight: 700;
                  color: #333;
                  max-height: 44px;
                  line-height: 22px;
                }
                .item-list-cont-desc-clamp2 {
                  overflow: hidden;
                  text-overflow: ellipsis;
                  font-size: 14px;
                  line-height: 22px;
                  max-height: 44px;
                  color: #666;
                  margin-top: 10px;
                }
              }
              .pic {
                width: 100%;
                border-radius: 6px;
                padding: 0 0 10px;
                position: relative;
                .item-list-back-img {
                  border-radius: 6px;
                  background-color: #f4f4f4;
                  background-repeat: no-repeat;
                  background-position: 50%;
                  background-size: cover;
                }
              }
              .item-list-cont-bottom {
                flex: 1 1;
                flex-grow: 1;
                flex-shrink: 1;
                flex-basis: 0%;
                display: flex;
                align-items: flex-end;
                .userInfo {
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  width: 200px;
                  .photo {
                    height: 20px;
                    width: 20px;
                    margin-right: 5px;
                    border: none;
                    float: left;
                  }
                }
              }
            }
            .item-list-pic-left {
              background-color: #fff;
              border-radius: 6px;
              margin: 10px 0;
              width: 100%;
              .pic {
                height: 132px;
                width: 132px;
                border-radius: 6px 0 0 6px;
                float: left;
                position: relative;
                .item-list-bigPic {
                  height: 132px;
                  width: 132px;
                  border: none;
                  float: left;
                }
              }
              .item-list-cont {
                height: 112px;
                padding: 10px;
                display: flex;
                flex-direction: column;
                .item-list-cont-title {
                  overflow: hidden;
                  text-overflow: ellipsis;
                  font-size: 16px;
                  font-weight: 700;
                  color: #333;
                  max-height: 42px;
                  line-height: 20px;
                }
                .item-list-cont-desc {
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  font-size: 12px;
                  line-height: 15px;
                  max-height: 15px;
                  color: #333;
                  margin-top: 5px;
                  margin-bottom: 32px;
                }
                 .item-list-cont-bottom {
                flex: 1 1;
                flex-grow: 1;
                flex-shrink: 1;
                flex-basis: 0%;
                display: flex;
                align-items: flex-end;
                .userInfo {
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  width: 200px;
                  .photo {
                    height: 20px;
                    width: 20px;
                    margin-right: 5px;
                    border: none;
                    float: left;
                  }
                }
              }
              }
            }
          }
          .more-text {
            font-size: 16px;
            line-height: 15px;
            padding: 15px 0;
            color: #666;
            text-align: center;
          }
        }
      }
    }

    .footer-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      font-size: 12px;
      z-index: 1001;
      align-items: center;
      display: flex;
    }
    .navigation {
      align-items: center;
      background-image: linear-gradient(
        180deg,
        #e8e8e8,
        #e8e8e8 50%,
        transparent 0
      );
      background-size: 100% 1px;
      background-repeat: no-repeat;
      background-position: 0 0;
      background-color: #fff;
      height: 50px;
      .navigation-item {
        display: inline-block;
        width: 75px;
        position: relative;
        color: #555;
        flex: 1 1;
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 0%;
        flex-direction: column;
        height: 100%;
        justify-content: center;
        text-align: center;
        // color: #39ac69;
        display: flex;
        .iconfont1 {
          background: url("http://127.0.0.1:8088/upload/nav6.fe8f6378.png")
            no-repeat;
          height: 30px;
          background-size: 24px auto;
          background-position: center 0;
        }
        .iconfont2 {
          background: url("http://127.0.0.1:8088/upload/nav6.fe8f6378.png")
            no-repeat;
          height: 30px;
          background-size: 24px auto;
          background-position: center -651px;
        }
        .iconfont3 {
          background: url("http://127.0.0.1:8088/upload/nav6.fe8f6378.png")
            no-repeat;
          height: 30px;
          background-size: 24px auto;
          background-position: center -100px;
        }
        .iconfont4 {
          background: url("http://127.0.0.1:8088/upload/nav6.fe8f6378.png")
            no-repeat;
          height: 30px;
          background-size: 24px auto;
          background-position: center -200px;
        }
        .iconfont5 {
          background: url("http://127.0.0.1:8088/upload/nav6.fe8f6378.png")
            no-repeat;
          height: 30px;
          background-size: 24px auto;
          background-position: center -300px;
        }
        .navigation-item-label {
          display: block;
          height: 20px;
          line-height: 17px;
        }
        .nav-item-label1 {
          color: #39ac69;
        }
      }
    }
  }
}
</style>

<script>
export default {
  data() {
    return {};
  },
  created() {},
  methods: {
    follow() {
        this.$router.push({
        name: "find"
      });
    },
    foolist() {
      this.$router.push({
        name: "foodlist"
      });
    },
    recommend(){
      this.$router.push({
        name: "recommend"
      });
    },
    life(){
       this.$router.push({
        name: "life"
      });
    },
    index() {
      this.$router.push({
        name: "index"
      });
    },
    buy() {
      this.$router.push({
        name: "buy"
      });
    },
    list() {
      this.$router.push({
        name: "list"
      });
    },
    mine() {
      this.$router.push({
        name: "mine"
      });
    }
  }
};
</script>





